<template>
  <div>
    <mu-dialog :open.sync="isOpenSimple">
      <div class="dialog-main">
        <mu-tabs :value.sync="tabActive" inverse color="secondary" text-color="rgba(80, 80, 80, 0.54)" center>
          <mu-tab>
            <mu-icon value="note_add"></mu-icon>本地文件
          </mu-tab>
          <mu-tab>
            <mu-icon value="link"></mu-icon>实时调试
          </mu-tab>
        </mu-tabs>
        <div class="demo-text" v-if="tabActive === 0">
          <mu-button fab color="teal" size="large">
            <mu-icon value="add"></mu-icon>
          </mu-button>
        </div>
        <div class="demo-text" v-if="tabActive === 1">
          <mu-form :model="form" class="mu-demo-form" :label-position="labelPosition" label-width="100">
            <mu-form-item prop="input" label="端口">
              <mu-text-field v-model="form.port"></mu-text-field>
            </mu-form-item>
          </mu-form>
        </div>
      </div>
      <mu-button slot="actions" flat color="primary" @click="closeSimpleDialog">完成</mu-button>
    </mu-dialog>
  </div>
</template>

<script>
export default {
  name: 'new-project',
  data () {
    return {
      isOpenSimple: false,
      tabActive: 0,
      form: {
        port: ''
      }
    }
  },
  watch: {
    showModal () {
      this.isOpenSimple = this.showModal
    },
    isOpenSimple () {
      this.$emit('closeModal', this.isOpenSimple)
    }
  },
  props: {
    showModal: {
      type: Boolean,
      default () {
        return false
      }
    }
  },
  methods: {
    openSimpleDialog () {
      this.isOpenSimple = true
    },
    closeSimpleDialog () {
      this.isOpenSimple = false
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-main {
  width: 700px;
  height: 400px;
}
</style>